import React, {useEffect, useState} from 'react'
import { useNavigate} from 'react-router-dom'
import { Button, Select, Form, Input, Switch, Upload, Image, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import {fetchCateLists,AddCates} from '@a/cateLists'
import {getToken} from '@u/'
export default function CateAdd() {
const navigate =useNavigate()
const [cates, setCates] = useState([])
    useEffect(()=> {
        fetchCateLists().then(res => {
    const cate = res.data.data.lists.map(item => {
return {
    value: item.id,
    label: item.cateName
}
    })
    
            setCates([
                {
                    value: -1,
                    label: '顶层分类'
                },
                ...cate
            ])
        })
    },[])

//表单提交失败和成功的回调

    const onFinish = (values) => {
        values = {
        ...values,
        icon,
        enable: values.enable?1:0
        }
        AddCates(values).then(res => {
            if (res.data.code === 200) {
                message.success(res.data.msg, 2, () => {
                  // 刷新页面
                  navigate(0)
                  
                })
              }
        })
      };
      const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
      };
//表单提交失败和成功的回调
    //   下拉菜单
      const handleChange = (value) => {
        console.log(`selected ${value}`);
      };
      //   下拉菜单
      const [icon, setIcon] =useState('')
      //上传文件
     const onUploadChange = (info) => {
       
          if (info.file.status === 'done') {
        //    上传成功
        setIcon(info.file.response.data.url)
          } 
     } 
      //上传文件
  return (
    <div>
        <Form
      name="basic"
      labelCol={{
        span: 6,
      }}
      wrapperCol={{
        span: 18,
      }}
      initialValues={ // 表单初始值
        {
          pid: -1,
          enable: true,
          cateName: '',
          icon: '',
        }
      }
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      autoComplete="off"
    >
      <Form.Item
        label="商品分类名称"
        name="cateName"
        rules={[
          {
            required: true,
            message: '商品名称必须填写',
          },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        label="是否启用"
        name="enable"
        valuePropName="checked"
      >
         <Switch checkedChildren="开启" unCheckedChildren="关闭" />
      </Form.Item>
      <Form.Item
        label="分类图标"
        name="icon"
      >
         <Upload 
         name="file"
         action="/api/upload"
         headers={
            {
                token: getToken()
            }
         }
         onChange = {
            onUploadChange
          }
         >
            
    <Button icon={<UploadOutlined />}>点击上传</Button>
  </Upload>
  <Image width={100} src={icon}/>
      </Form.Item>
      <Form.Item
        label="父级分类"
        name="pid"
      >
        <Select
      
      style={{
        width: 120,
      }}
      onChange={handleChange}
      options={cates}
      
    />
      </Form.Item>

      <Form.Item
        wrapperCol={{
          offset: 8,
          span: 16,
        }}
      >
        <Button type="primary" htmlType="submit">
          确认提交
        </Button>
      </Form.Item>
    </Form>
    </div>
  )
}
